<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>orderPayment</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/kefu.css">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background: #efefef;
        }

        .order_nav {
            position: relative;
        }

        .order_nav, .order_nav img, .total, .total img {
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
        }

        a.shift {
            position: absolute;
            left: 0;
            top: 0;
            height: 40px;
            width: 40px;
        }

        a.shift img {
            width: 80%;
            height: auto;
            margin-top: 10%;
        }

        input:focus {
            outline: none
        }

        .input_name {
            width: 96%;
            height: 100px;
            margin-left: 2%;
        }

        .input_name input {
            width: 96%;
            height: 30px;
            border: none;
            padding: 5px;
            font-size: 1em
        }

        .input_name .border_input {
            border-bottom: 1px solid #e1e1e0;
        }

        .pay_btn {
            width: 40%;
            height: auto;
            margin-left: 30%;
            margin-top: 8%;
        }

        .pay_btn img {
            width: 100%;
            height: auto
        }
  .nav{position:fixed;z-index:99;background:#000;width:60%;height:100%;left:-100%;top:0px;opacity:0.8;}
    .mask{position:fixed;z-index:9;background:#000;width:100%;height:100%;top:0px;opacity:0.2;left:0%;display:none;}
    .nav p{width:100%;border-top:1px solid #fff;color:#fff;text-align: center;font-size:1.2rem; display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center; align-items: center;}
    </style>
</head>
<body>
<div class="order_nav">
    <img src="img/Payment_V2.png">
    <a class="shift"><img src="img/nav.png"></a>
</div>
<div class="mask"></div>
<div class="nav am-flexbox-v">
    <p class="am-flexbox-item">Home Page</p>
    <p class="am-flexbox-item">Campaign</p>
    <p class="am-flexbox-item">Web Navigation</p>
    <p class="am-flexbox-item">My Favourite</p>
    <p class="am-flexbox-item">My Order</p>
    <p class="am-flexbox-item">My Dealer</p>
    <p class="am-flexbox-item">Address Management</p>
</div>
<div class="input_name">
    <input type="text" value="" placeholder="*WeChat Name" class="border_input">
    <input type="text" value="" placeholder="*Mobile Phone">
</div>
<div class="total">
    <img src="img/Payment_total.png">
</div>
<div class="pay_btn" id="pay">
    <a href="paymentred.html" target="_self"><img src="img/Payment_Btn.png"></a>
</div>


<div class="ke" id="kefu">
    <img src="img/kefu1.png" id="duihua">
</div>

<div class="contain_share">
    <div class="share_dialog">
        <a href="javascript:void(0)" class="close"></a>
        <img src="img/dialog.png">
    </div>
</div>

<script type="text/javascript" src="lib/zepto.min.js"></script>
<script type="text/javascript" src="js/kefu.js"></script>
<script type="text/javascript">
    $(function(){
        $(".shift").click(function(){
            $(".nav,.mask").animate({left:"0"},500);
            $(".mask").css("display","block")
        })
        $(".mask").click(function(){
            $(".nav").animate({left:"-100%"},500);
            $(".mask").css("display","none")
        })
    })
</script>
</body>
</html>